<template>
  <div class="main">
    <basic-layout :title="title" :showFilterBtn="false" :showAddBtn="false"
                  @handleFilter="$refs.queryPopupRef.show = true">
      <van-tabs v-model:active="active" @click="tabClick">
        <van-tab title="待采集"></van-tab>
        <van-tab title="已采集"></van-tab>
      </van-tabs>
      <!-- 列表 -->
      <van-row class="listCard">
        <van-pull-refresh
          class="cardVanPullRefresh"
          v-model="refreshing"
          @refresh="onRefresh">
          <van-list
            v-if="dataList.length > 0"
            v-model="loading"
            :finished="finished"
            finished-text="已经到底啦!"
            @load="nextPage"
            :mmediate-check="false"
            :offset="100"
          >

            <div v-for="item in dataList" class="dataStyle" v-if="dataList.length > 0">
              <div class="hengXian">
                <div class="dataBStyle">
                  <div class="listLeft">
                    <span class="ziti">{{ item.fangcname }}</span>
                  </div>
                  <div class="dh" style="color: #aaaaaa">
                    <span>{{ item.diz }}</span>
                    <div class="aImgStyle1">
                      <span v-if="(item.jingd == null && item.weid == null) || (item.jingd == '' && item.weid == '')" style="color: red">未采集</span>
                      <span v-else style="color: green">已采集</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="listMain">
                <div class="sh">
                  <span style="color:#aaa;margin-left: 10px;font-size: 0.4rem;margin-bottom: 10px;">经度:&nbsp;&nbsp;</span>
                  {{ item.jingd != null && item.jingd != '' ? item.jingd : '&#45;&#45;' }}
                </div>
                <div class="sh">
                  <span style="color:#aaa;margin-left: 10px;font-size: 0.4rem;">纬度:&nbsp;&nbsp;</span>
                  {{ item.weid != null && item.weid != '' ? item.weid : '&#45;&#45;' }}
                </div>
                <div class="sh">
                  <div v-if="item.jianzmj">
                    <span style="color:#aaa;margin-left: 10px;font-size: 0.4rem;">面积:&nbsp;&nbsp;</span>&nbsp;{{ item.jianzmj }}㎡
                  </div>
                  <div v-else>
                    <span style="color:#aaa;margin-left: 10px;font-size: 0.4rem;"> 面积:&nbsp;&nbsp;{{ item.jianzmj }}</span>
                  </div>
                </div>
                <div class="sh">
                  <span style="color:#aaa;margin-left: 10px;font-size: 0.4rem;">分类:&nbsp;&nbsp;</span>
                  {{ item.dal }} / {{ item.xiaol }}
                </div>
                <div class="bImgStyle">
                  <van-button v-if="(item.jingd == null && item.weid == null) || (item.jingd == '' && item.weid == '')" color="green" plain @click="getLocation(item)">坐标采集</van-button>
                  <van-button v-else color="red" plain @click="delLongitudeLatitude(item)">取消坐标</van-button>
                </div>
              </div>
            </div>
          </van-list>
        </van-pull-refresh>
      </van-row>
    </basic-layout>
  </div>
</template>
<script>
import { getLouyList, updateLouyzb } from '@api/srvAssurance/assetLabel/assetLabel'

export default {
  components: {},
  data () {
    return {
      inputSearchValue: '',
      title: '坐标采集',
      active: 0,
      dataList: [],
      loading: false,
      isLoading: false,
      finished: false,
      refreshing: false,
      queryParam: {
        keyword: null,
        type: '0',
        pageIndex: 1,
        pageSize: 10,
      },
      updateParam: {
        louyid: null,
        jingd: null,
        weid: null,
      },
      updateParamDel: {
        louyid: null,
      },
    }
  },

  created () {
    this.initData()
  },

  methods: {

    searchData (value) {
      value = value.trim()
      this.queryParam.keyword = value
      this.initData()
    },

    getLocation (item) {
      let louyid = item.louyid
      let data = {
        louyid: louyid,
      }
      wx.getLocation({
        type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
        success: res => {
          var latitude = res.latitude // 纬度，浮点数，范围为90 ~ -90
          var longitude = res.longitude // 经度，浮点数，范围为180 ~ -180。
          // var speed = res.speed; // 速度，以米/每秒计
          // var accuracy = res.accuracy; // 位置精度
          var gps_status = res.gps_status //gps状态，-1：应用未获取GPS权限；
          // 0：已获取GPS权限，GPS信号异常；
          // 1：已获取GPS权限，GPS信号正常，AGPS信号异常；
          // 2：已获取GPS权限，GPS信号异常，AGPS信号正常；
          // 3：已获取GPS权限，GPS/AGPS信号正常
          if (gps_status == 3) {
            data.jingd = longitude
            data.weid = latitude
            updateLouyzb(data).then(res => {
              if (res.status === 0) {
                this.$toast(res.message)
                // alert(res.message)
              }
              this.refresh()
            })

            // this.$toast("[" + item.fangcname + "]经纬度更新成功");
          } else if (gps_status == -1) {
            this.$toast('应用未获取GPS权限')
          } else if (gps_status == 0) {
            this.$toast('GPS信号异常')
          } else if (gps_status == 1) {
            this.$toast('AGPS信号异常')
          } else if (gps_status == 2) {
            this.$toast('GPS信号异常')
          }
        },
        fail: function (res) {
          console.log('getLocation end', res)
        }

      })
    },
    delLongitudeLatitude (item) {
      this.$dialog.confirm({
        title: '确认操作',
        message: '确定删除已经关联的经纬度信息吗？',
      }).then(async () => {
        this.updateParamDel.louyid = item.louyid
        let res = await updateLouyzb(this.updateParamDel)
        if (res.status === 0) {
          this.$toast(res.message)
        }
        this.refresh()
      }).catch(() => {
      })
    },

    onRefresh () {
      this.initData()
    },

    async initData () {
      this.queryParam.pageIndex = 1
      this.finished = false
      this.refreshing = true
      await this.getDataList()
      this.refreshing = false
    },

    async refresh () {
      this.finished = false
      this.refreshing = true
      await this.getDataList()
      this.refreshing = false
    },

    // 加载下一页
    nextPage () {
      // 判断第一次查出来的数据是否还有下一页数据，如果没有则不调接口
      if (this.dataList.length < (this.queryParam.pageIndex * this.queryParam.pageSize)) {
        this.finished = true
        return
      }
      setTimeout(() => {
        this.queryParam.pageIndex += 1
        this.getDataList()
      }, 1000)
    },

    async getDataList () {
      this.loading = true
      let res = await getLouyList(this.queryParam)
      if (res.status == 0) {
        if (this.queryParam.pageIndex == 1) {
          // 清空列表数据
          this.dataList = []
        }
        this.dataList = this.dataList.concat(res.data)
        // 如果数据加载完毕，finished 标志位置为 true，滑到页面底部则不会再触发 nextPage() 方法了。
        if (this.dataList.length >= res.totalCount) {
          this.finished = true
        }
      }
      this.loading = false
    },

    tabClick (val) {
      if (val == 0) {
        this.queryParam.type = '0'
      } else {
        this.queryParam.type = '1'
      }
      this.dataList = []
      this.initData()
    },

  }
}
</script>

<style scoped lang="less">
.main {
  height: 100%;
  background-color: #8080803b;
  .listCard {
    .cardVanPullRefresh {
      .dataStyle {
        height: 176px;
        margin: 10px;
        background-color: #FFFFFF;
        line-height: 23px;
        border-radius: 3px;
        font-size: 0.4rem;

        .hengXian {
          box-sizing: border-box;
          border-bottom: 1px solid #eee;
          line-height: 0.64rem;
        }

        .dataBStyle {
          height: 55px;

          position: relative;

          .listLeft {
            margin-left: 10px;
            font-size: 0.4rem;
            font-weight: bold;
            padding-top: 9px;
            width: 250px;
            white-space: nowrap; /* 禁止换行 */
            overflow: hidden; /* 隐藏超出部分 */
            text-overflow: ellipsis; /* 在超出部分显示省略号 */

            .ziti {
              margin-top: 1px;

            }
          }

          .dh {
            margin-left: 10px;
            font-size: 0.3rem;

            .aImgStyle1 {
              position: absolute;
              top: 0.4667rem;
              right: 0.68rem;
              font-size: 15px;
              margin-left: 78%;
            }
          }
        }


        .listMain {
          line-height: 29px;
          position: relative;

          .sh {
            width: 250px;
            white-space: nowrap; /* 禁止换行 */
            overflow: hidden; /* 隐藏超出部分 */
            text-overflow: ellipsis; /* 在超出部分显示省略号 */
          }

          .bImgStyle {
            position: absolute;
            top: 65px;
            right: 15px;

            .van-button {
              padding: 0 10px;
              height: 30px;
              line-height: 30px;
              border-radius: 17px;
              font-size: 13px;
            }
          }

          .downOtherProcess {
            width: 80%;
            float: left;
          }

          .downOtherText {
            transform: translateY(-5px);
            width: 100%;
          }
        }
      }

      /deep/ .van-progress__pivot {
        display: none;
      }

      /deep/ .van-progress {
        height: 11px;
        margin-top: 4px;
      }

      .custom-image {
        height: 100%;
      }
    }
  }

  /deep/ .van-tabs__line {
    background: #4eb3e9;
  }

  /deep/ .van-tabs__nav {
    background-color: #FFFFFF;
  }
}

</style>
